<template>
  <div class="guiji-page" v-loading="timerLoading">
    <div class="nav-wrap">
      <div class="nav-top">
        <span style="color: #333;font-size: 12px;font-weight:bold;margin-left: 20px">实时跟踪</span>
        <span style="color: #333;font-size: 13px;margin-left: 20px">{{ nowCar.carNo }}(设备号:{{ nowCar.deviceNo }})</span>
        <div style="flex: 1"></div>
        <span class="refresh-icon" @click="handleTrackAnimation"
          style="margin-right: 20px;background: white;font-size: 12px;padding: 5px;cursor: pointer">轨迹回放</span>
      </div>

      <div class="nav-center">
        <div class="state-wrap">
          IMEI：<span>{{ nowCar.deviceNo }}</span> 日期：<span>{{ nowCar.timeReported }}</span>
        </div>

        <div style="flex: 1"></div>

        <span style="font-size: 14px;color: #676767;margin-left: 20px">刷新间隔：</span>
        <el-select size="mini" v-model="refreshType" placeholder="请选择" @change="mmvRef">
          <el-option label="10s" value="10">
          </el-option>
          <el-option label="20s" value="20">
          </el-option>
          <el-option label="30s" value="30">
          </el-option>

        </el-select>

      </div>

      <div class="refreshCountdown-carInfo">
        <i class="el-icon-time"></i>
        <span> {{ timerNum >= 10 ? timerNum : '0' + timerNum }}秒后刷新 </span>
        <span style="color: rgb(204, 51, 51); cursor: pointer" @click="mmvRef">
          刷新</span>
      </div>

      <div class="nav-bottom">

        {{ nowCar.addrDetail }}
      </div>

    </div>
    <baidu-map @ready="handlerBMap" :center="mapCenter" class="map" :zoom="13" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>

      <bm-marker @click="markerClick" :icon="icon" :position="{ lng: nowCar.lng, lat: nowCar.lat }">

        <bm-info-window ref="infoWindow" :position="{ lng: nowCar.lng, lat: nowCar.lat }" @close="showInfo = false"
          @open="showInfo = true" :show="showInfo">
          <div style="font-size: 13px;">速度：{{nowCar.speed||0}}MK/H</div>
          <div style="font-size: 13px;">定位方式：卫星定位</div>
        </bm-info-window>

      </bm-marker>

    </baidu-map>

  </div>
</template>

<script>
import * as MmvApi from '@/api/mmv'
import uilts from "@/utils";
import { v4 } from 'uuid'

export default {
  data() {
    return {
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } }
      },
      nowCar: {},
      refreshType: '10',
      nowCarNo: '',
      startTime: '',
      endTime: '',
      mapCenter: {
        lng: "116.403963",
        lat: "39.915119",
      },
      trackPath: [],
      showInfo: true,
      timerNum: 10,
      timerLoading: false
    }
  },

  created() {
    const { query } = this.$route;
    this.nowCar = JSON.parse(query.deviceItem);
    this.nowCarNo = this.nowCar.carNo;
    // this.$router.push({ query: {carNo:this.nowCarNo} });
    this.$router.push({   query: { deviceItem: JSON.stringify({carNo:this.nowCarNo}) }, });
    console.log('当前设备信息>>', this.nowCar);
  },

  mounted() {
    this.getData();
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {

    genterateTimer() {
      this.timer = setInterval(() => {
        if (this.timerNum >= 1) {
          this.timerNum--
        } else {
          this.mmvRef()
        }
      }, 1e3)
    },

    getData() {
      this.timerLoading = true
      MmvApi.carBasicMonitoring({
        carNo: this.nowCarNo
      }).then((response) => {
        this.timerLoading = false
        this.nowCar = response.rows[0]

        this.mapCenter.lat = this.nowCar.lat
        this.mapCenter.lng = this.nowCar.lng

        this.timerNum = Number(this.refreshType)
        this.genterateTimer()
      }).catch(e => {
        this.timerLoading = false
      })
    },

    // getData() {
    //   if(this.nowCar.lat){
    //     this.mapCenter.lat = this.nowCar.lat||0;
    //     this.mapCenter.lng = this.nowCar.lng||0;
    //   }
    //   this.timerNum = Number(this.refreshType)
    //   this.genterateTimer()
    // },


    mmvRef() {
      clearInterval(this.timer)
      this.getData()
    },

    markerClick() {
      this.showInfo = true
    },

    handleTrackAnimation() {
      this.timerLoading = true
      const uilts = require('@/utils/index')
      const deviceNo = this.nowCar.deviceNo
      this.startTime = uilts.parseTime(
        new Date().getTime() - 24 * 60 * 60 * 1000);
      this.endTime = uilts.parseTime(new Date())
      MmvApi.getTrack({
        deviceNo: deviceNo,
        trackStartTime: this.startTime,
        trackEndTime: this.endTime,
        manufacturer: this.nowCar.manufacturer
      }).then((response) => {
        this.timerLoading = false
        this.trackPath = response.data.trackPlayList || []
        this.jump(deviceNo, this.nowCar.manufacturer, response.data.totalMileage, this.nowCar.carNo, this.nowCar.simCard)
      })
        .catch((err) => {
          this.timerLoading = false
          this.$message.error('暂无轨迹')
        })
    },
    jump(deviceNo, manufacturer, totalMileage, carNo, simNo) {
      const id = v4()
      let routeUrl = this.$router.resolve({
        path: '/map-track',
        query: { id: id, aaa: this.startTime, bbb: this.endTime, deviceNo, manufacturer, totalMileage, carNo, simNo },
      })

      sessionStorage.setItem(id, JSON.stringify(this.trackPath))
      window.open(routeUrl.href, '_blank')
    },

    handlerBMap({ BMap, map }) {
      const { query } = this.$route
      this.BMap = BMap;
      this.map = map;
    },
  },
}
</script>
<style lang="scss" scoped>
.guiji-page {
  display: flex;
  position: relative;
}

.info-window {
  //height: 190px;
  border-radius: 4px;
  border: 1px solid #333;
}

.info-head {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  padding: 0 20px;
}

.info-content {
  display: flex;
  //justify-content: center;
}

.info-left {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.nav-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
}

.nav-top {
  height: 42px;
  display: flex;
  align-items: center;
  background-color: aliceblue;
  background-image: linear-gradient(#F1F5FD, #E9F0FF);
  box-shadow: inset 0 1px 0 #fff;
  ;
  border-bottom: 1px solid #ddd;
}

.refreshCountdown-carInfo {
  position: absolute;
  top: 108px;
  left: 100px;
  z-index: 20;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 5px 20px;
  white-space: nowrap;
  box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
}

.nav-center {
  height: 51px;
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 0 20px;
}

.state-wrap {
  font-size: 14px;
  color: #999;

  span {
    color: #333;
  }
}

.nav-bottom {
  width: 1000px;
  height: 56px;
  border-radius: 0 0 50px 50px;
  border: 1px solid #ddd;
  background: white;
  border-top: 0;
  align-self: center;
  -webkit-box-shadow: 0px 1px 4px -1px rgb(0 0 0 / 30%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.speed-text {
  margin-left: 10px;
  width: 58px;
  font-size: 12px;
  color: #676767;
}

.gpsTime {
  width: 118px;
  margin-left: 10px;
  font-size: 12px;
  color: #676767;
}

.step-wrap {
  width: 180px;
  margin: 0 10px;
}

.speed-wrap {
  width: 80px;
  margin: 5px 10px 0 0;
}

.refresh-icon {
  margin-left: 10px;
  padding: 2px;
  border: 1px solid #adadad;
  color: #333;
  background-color: #e6e6e6;
  font-size: 13px;
}

::v-deep .el-slider__runway {
  margin: 5px 0;
}

.map {
  /*width: calc(100vw - 320px);*/
  width: 100vw;
  height: 100vh;
  /*margin-top: 93px;*/
}

::v-deep .BMap_stdMpType0 .BMap_stdMpZoom,
.BMap_stdMpType1 .BMap_stdMpZoom,
.BMap_stdMpType4 .BMap_stdMpZoom,
.BMap_stdMpType3 .BMap_stdMpZoom {
  top: 130px;
}

::v-deep .anchorTR {
  top: 130px !important;
}

.bottom-row {
  height: 213px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

.bottom-top {
  height: 37px;
  display: flex;
  align-items: center;
  background-color: aliceblue;
  background-image: linear-gradient(#F1F5FD, #E9F0FF);
  border-bottom: 1px solid #ddd;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  justify-content: space-between;

  h5 {
    padding: 10px;
    font-weight: bold;
    color: #666;
  }

  i {
    border: 1px solid #ccc;
    padding: 10px;
    font-weight: bold;
    color: #666;
  }
}

.bottom-title {}

.list-title {
  display: flex;
  align-items: center;
  margin-left: 10px;
  height: 27px;
  border-bottom: 1px solid #ececec;

  td {
    font-size: 12px;
    color: #666;
    font-weight: bold;
  }
}

.bottom-content {
  overflow: scroll;
  max-height: 149px;
  overflow-x: hidden;

  .list-title2 {
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: 27px;
    border-bottom: 1px solid #ececec;

    td {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
